<template>
	<div id="video">
		<div class="wapper">
			<div class="top">
				<div class="row">
					<el-select class="select" placeholder="请选择接口" v-model="selectedApi">
						<el-option v-for="item in arr" :key="item.id" :value="item.api" :label="item.desc">{{ item.desc }}</el-option>
					</el-select>
					<el-input class="inp" placeholder="请输入视频链接" v-model="input"></el-input>
					<el-button @click="play">播放</el-button>
				</div>
			</div>
			<div class="frame"><iframe border="no" frameborder="no" v-if="src" :src="src" allowfullscreen="true"></iframe></div>
		</div>
		<div class="fiexd-btn fiexd-btn-home" @click="goHome">
			<svg style="width: 25px;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8="">
				<path fill="currentColor" d="M512 128 128 447.936V896h255.936V640H640v256h255.936V447.936z"></path>
			</svg>
		</div>
	</div>
</template>

<script>
import { getVideoApiList } from '@/api/video.js';
export default {
	data() {
		return {
			arr: [],
			selectedApi: '',
			input: '',
			src: ''
		};
	},
	created() {
		this.getData();
	},
	methods: {
		goHome() {
			this.$router.push('/');
		},
		getData() {
			getVideoApiList().then(res => {
				if (res.code == 200) {
					this.arr = res.data;
					this.selectedApi = this.arr[0].api;
				} else {
					this.$msgError(res);
				}
			});
		},
		play() {
			this.src = '';
			this.$nextTick(() => {
				this.src = this.selectedApi.replace('${url}', this.input);
			});
		}
	}
};
</script>

<style lang="scss">
#video {
	height: 100%;

	.wapper {
		display: flex;
		flex-direction: column;
		gap: 20px;
		height: 100%;
	}
	.row {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
		margin-top: 20px;
		.select {
		}
		.inp {
			max-width: 60%;
		}
	}
	.frame {
		flex: 1;
		width: 80%;
		margin: 0 auto;
		iframe {
			width: 100%;
			height: 90%;
		}
	}
	.fiexd-btn-home {
		right: 30px !important;
		bottom: 30px !important;
	}
}
</style>
